<!DOCTYPE html>
<html lang="" data-theme="light">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href=<%- faviconDir %> type="image/x-icon">
  <meta name="description" content="梦想建广厦千万间，与天下寒仕俱欢颜......">
  <meta name="keywords" content="个人主页，简历，引导页，dony，donymh">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title><%- title %></title>
  <!-- 注入系统常量开始 -->
  <%- injectScript %>
    <!-- /注入系统常量结束 -->

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
        transition: background-color 0.2s ease;
      }

      .mh-loading {
        background: radial-gradient(white, #d8eaff);
        background-size: 100%;
        background-position: center;

        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 999999;
        margin-top: 0px;
        top: 0px;
        pointer-events: none;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .mh-loading-center {
        height: 150px;
        width: 150px;
        position: relative;
        border-radius: 50%;
        background: #472eff;
        animation: zoom 1s linear infinite;
      }

      @keyframes zoom {
        0% {
          transform: scale(0);
          opacity: 1;
        }

        50% {
          opacity: 0.5;
        }

        100% {
          transform: scale(1);
          opacity: 0;
        }
      }
    </style>
</head>

<body>
  <div id="MhLoading" class="mh-loading">
    <div id="MhLoadingCenter" class="mh-loading-center"></div>
  </div>
  <div class="mh-filter"></div>

  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>

  <style>
    @media (max-width: 1200px) {

      .project-list .project-item.surprise,
      .project-list .project-item.project {
        width: calc(50% - 20px);
      }

      .project-list .project-item {
        margin: 10px;
      }
    }

    @media (max-width: 960px) {

      /* 弹窗样式 */
      .base-dialog-body {
        width: 80% !important;
      }

      /* 页面容器样式 */
      .page-container .left-view__content {
        display: none;
      }

      .page-container .right-view {
        width: 100%;
        padding: 20px 12px;
      }

      /* 右视图内容样式 */
      .page-container .right-view .left-view__content-logo.index-logo {
        display: block;
        flex-shrink: 0;
        width: 40%;
        margin: 0 auto;
        position: relative;
        max-width: 200px;
        aspect-ratio: 1/1;
        background-size: cover;
        border-radius: 50%;
        border: 0.5px solid #ffffff;
      }

      .page-container .right-view .welcome {
        font-size: 10vw;
        margin: 2vw 0;
      }

      .page-container .right-view .description,
      .page-container .right-view .description .text-background {
        font-size: 4vw;
      }

      .page-container .right-view .description.certificate,
      .page-container .right-view .description.intention {
        display: block;
      }

      .page-container .right-view .mh-options-wrap {
        margin-top: 4vw;
      }

      .page-container .right-view .snake-container {
        width: 100%;
      }

      /* 项目列表样式 */
      .page-container .right-view .project-list .project-item {
        padding: 10px;
        margin: 9px;
        width: calc(50% - 18px);
      }

      .page-container .right-view .project-list .project-item.project {
        height: auto;
        margin: 9px;
        width: calc(100% - 18px);
      }

      .page-container .right-view .project-list .project-item .project-item-left p {
        font-size: 14px;
      }

      .page-container .right-view .project-list .project-item .project-item-left h1 {
        font-size: 18px;
      }

      .page-container .right-view .project-list .project-item:hover h1 {
        font-size: 20px;
      }

      .page-container .right-view .project-list .project-item.surprise .project-item-right,
      .page-container .right-view .project-list .project-item.surprise .project-item-right img {
        display: none;
      }

      .page-container .right-view .project-list .project-item.surprise .project-item-left {
        width: 100%;
      }

      .page-container .right-view .right-mystery-box .cube-container {
        justify-content: center;
      }

      .page-container.p-20 .page-container__ai-content {
        width: 100%;
      }

      .page-container .right-view .right-skills .icon-pc {
        display: none;
      }

      .page-container .right-view .right-skills .icon-mobile {
        display: block;
      }
    }
  </style>
</body>

</html>